<template>
    <div class="team-container">
        <div class="team-con">
            <div class="team-txt1">0.00</div>
            <div class="team-txt2">累计获得分润</div>
            <div class="team-info">
                <div class="tf-item1">
                    <img src="../assets/airplane.png" />
                    <div class="tf-con">
                        <div class="tf-txt1">0</div>
                        <div class="tf-txt2">推广明细</div>
                    </div>
                </div>
                <div class="tf-item2">
                    <img src="../assets/team.png" />
                    <div class="tf-con1">
                        <div class="tf-txt1">0</div>
                        <div class="tf-txt2">我的团队</div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="rule">
                <div class="rule-txt">
                    <span>活动规则<img src="../assets/right.png"/></span>
                </div>
            </div>
            <img src="../assets/team-banner.png" class="ts-banner" />
        </div>
    </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.team-container {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  text-align: center;
  font-size: 4vw;
  overflow: hidden;
  .team-con {
    width: 91.5%;
    margin: 0 auto;
    .team-txt1 {
      color: #fe6d0a;
      margin-top: 11%;
      font-size: 6vw;
    }
    .team-txt2 {
      font-size: 3.6vw;
      color: #c8c8c8;
      margin-top: 1.5%;
    }
    .team-info {
      margin-top: 7%;
      .tf-item1 {
        .team-comm;
      }
      .tf-item2 {
        width: 44%;
        .team-comm(right);
      }
      .tf-con {
        .ts-con;
      }
      .tf-con1 {
        .ts-con(#fff);
      }
    }
    .rule {
      position: relative;
      margin-top: 30%;
      .rule-txt span {
        color: #c8c8c8;
        font-size: 4vw;
        position: relative;
        img {
          width: 1.9vw;
          margin-left: 1vw;
          display: inline-block;
          vertical-align: baseline;
          position: relative;
          top: 0.12vw;
        }
      }
    }
    .ts-con(@color:#646464) {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 2;
      color: @color;
      .tf-txt1 {
        margin-top: 7%;
        font-size: 4.5vw;
      }
      .tf-txt2 {
        margin-top: 1%;
        font-size: 3.7vw;
      }
    }
    .team-comm(@float:left) {
      width: 44%;
      float: @float;
      position: relative;
      img {
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .ts-banner{
        width: 100%;
        display: block;
        margin-top: 12%;
    }
  }
}
</style>
